<template>
  <div class="date-container">
    <span class="titleClass" :style="titleStyle" v-show="titleName">{{ titleName }}</span>
    <el-date-picker
      class="dateClass"
      :style="dateStyle"
      v-model="dateValue"
      type="datetimerange"
      range-separator="－"
      value-format="YYYY-MM-DD HH:mm:ss"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, PropType } from 'vue'

const props = defineProps({
  modelValue: {
    type: Array as PropType<string[]>,
    default: () => []
  },
  titleName: String,
  titleMinWidth: {
    type: String,
    default: '70px'
  }, // 名字所占的宽度,默认为'50px'
  width: {
    type: String,
    default: '402px'
  },
  height: {
    type: String,
    default: '32px'
  }
})

const emit = defineEmits(['update:modelValue'])
const dateValue = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val)
  }
})

const titleStyle = computed(() => `min-width: ${props.titleMinWidth};`)
const dateStyle = computed(() => `width: ${props.width}!important;height:${props.height}!important`)
</script>

<style lang="scss" scoped>
.date-container {
  display: flex;
  align-items: center;
}

.titleClass {
  text-align: right;
  font-size: 14px;
  margin-right: 8px;
}

.el-range-separator {
  height: 32px;
}

</style>
